<template>
	<el-dialog
		:visible="showDialog"
		:append-to-body="true"
		:close-on-click-modal="false"
		title="全局变量配置"
		width="900px"
		@close="dialogCancel">
    <el-button type="primary" size="small" class="mar-btm-10" @click="addGlobal">新增全局变量</el-button>
    <el-table :data="globalVarData" border size="mini" class="mar-btm">
      <el-table-column prop="name" label="变量唯一标志" width="240">
        <template slot-scope="scope">
          <el-input v-model="scope.row.key" size="small" placeholder="请输入变量唯一标志"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="变量名称">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" size="small" placeholder="请输入变量名称"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="变量类型">
        <template slot-scope="scope">
          <el-select v-model="scope.row.type" class="width-100" placeholder="请选择变量类型"
                     size="small" @change="variableTypeChange(scope.row)">
            <el-option :label="globalType.label" :value="globalType.value" :key="idx"
                       v-for="(globalType, idx) in globalTypeData"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="value" label="变量值">
        <template slot-scope="scope">
          <VariableComponent :variable="scope.row"></VariableComponent>
          <!--					<el-input v-model="scope.row.value" size="small" placeholder="请输入变量值"></el-input>-->
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button size="small" @click="copyRow(scope.$index, scope.row)">复制</el-button>
          <el-button
	          v-show="(padType === 'reserve' && scope.$index > 8) || padType === 'control'"
	          size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex-justify-end">
      <el-button type="info" @click="dialogCancel"><span class="mar-lft-rgt-10">取消</span></el-button>
      <el-button type="primary" class="mar-lft-10" @click="dialogSubmit">
	      <span class="mar-lft-rgt-10">保存</span>
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {confirmHandle, messageHandle, generateUID} from "@/utils";
  import {msgCode} from "@/config/string";
  import {dataTypeArray} from "@/config/common";
  import VariableComponent from '../dock/component/VariableComponent.vue'
  import _ from "lodash";

  export default {
    name: 'GlobalVariables',
    components: {VariableComponent},
	  model: {
		  prop: 'showDialog',
		  event: 'change'
	  },
    props: {
	    showDialog: {
        type: Boolean,
        default: false
      },
      variables: {
        type: Array,
        default: () => {
          return [];
        }
      },
      padType: {
        type: String,
        default: ''
      },
    },
    data() {
      return {
        globalVarData: [],
        globalTypeData: dataTypeArray
      }
    },
    watch: {
	    showDialog() {
		    this.globalVarData = _.cloneDeep(this.variables);
      },
    },
    methods: {
      addGlobal() {
        this.globalVarData.push({
          name: '',
          type: 'string',
          key: `globalVar-${generateUID(16)}`,
          value: ''
        });
      },
      copyRow(index, row) {
        const data = _.cloneDeep(row);
        data.key = `globalVar-${generateUID()}`;
        this.globalVarData.splice(index + 1, 0, data);
      },
      handleDelete(index, row) {
        confirmHandle({label: `确定要删除变量：${row.name} 吗?`}).then(() => {
          this.globalVarData.splice(index, 1);
          messageHandle({code: msgCode.DELETE_SUCCESS, title: "变量"});
        }).catch(() => {
        });
      },
	    variableTypeChange(variable) {
		    switch (variable.type) {
			    case 'string':
				    variable.value = '';
				    break;
			    case 'int':
				    variable.value = 0;
				    break;
			    case 'double':
				    variable.value = 0;
				    break;
			    case 'bool':
				    variable.value = false;
				    break;
			    case 'list':
				    variable.value = "[]";
				    break;
			    case 'map':
				    variable.value = "{}"
				    break;
			    default:
				    break;
		    }
	    },
	    dialogCancel() {
	      this.$emit('change', false);
      },
	    dialogSubmit() {
        this.$emit('submit', this.globalVarData);
      },
    }
  }
</script>
